<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FormData</title>
</head>
<body>
<form name="form1" id="form1">
    <p>name:<input type="text" name="name" ></p>
    <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>
    <p>上传文件:<input type="file" name="photo" id="photo"></p>
    <p><input type="button" name="b1" value="submit" onclick="fsubmit()"></p>
</form>
<div id="result"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
        function fsubmit() {
            var form=document.getElementById("form1");
            var formData=new FormData(form);
            var oReq = new XMLHttpRequest();
            oReq.onreadystatechange=function(){
                if(oReq.readyState==4){
                    if(oReq.status==200){
                        var json=JSON.parse(oReq.responseText);
                        var result = '';
                         result += 'name=' + json['name'] + '<br>';
                         result += 'gender=' + json['gender'] + '<br>';
                        result += '<a href="/api/' + json['photo'] + '">下载地址 </a>';
                        $('#result').html(result);
                    }
                }
            }
            oReq.open("POST", "/api/server.php");
//            设置请求头
//            oReq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            oReq.send(formData);
            return false;
        }
</script>
</body>
</html>